import Taro, { Component, Config } from '@tarojs/taro'
import { Button, View, Text } from '@tarojs/components'
import './index.scss'
import { ORDER_TYPE, ORDER_TYPE_NAME, ADDITIONAL } from "@/config/types"
import { getOrderInfo, refundOrder, confirmReceipt } from "@/api/orderApi"
import { formatTime, getSubscribeMessage, copyText } from "@/utils/utils"
import {FyImg, Loading, OrderRefundModal} from "@/components/index"
import OrderCardGoods from "@/components/order/cart-goods"
import { toOrderListPage, toOrderCommentPage } from "@/utils/page_router"
import Logistics from '../logistics/index'
import OrderCardGoodsTwo from "@/components/order/cart-goods-two";
import styles from "../calc/index.module.scss";
import DeliveryIcon from "@/assets/images/delivery-icon.png";
import DiscountsIcon from "@/assets/images/discounts-icon.png";
import {getBrand, goodsScore} from "@/utils/storage";

export default class Index extends Component {
  state: any
  config: Config = {
    navigationBarTitleText: '订单详情'
  }
  static options = {
    addGlobalClass: true
  }

  constructor() {
    super(...arguments)
    const { params } = this.$router
    this.state = {
      id: params.id,
      loading: true,
      cartList: [],
      userInfo: {},
      orderInfo: {},
      isOpened: false,
      bool: false,
      tipList: ADDITIONAL
    }
  }

  componentDidShow() {
    this.getOrderInfo()
  }

  //  订单详情
  getOrderInfo() {
    getOrderInfo(this.state.id).then(({ data }) => {
      // data.expressNo = '78219589013377'
      // data.expressName = '韵达'
      this.setState({
        cartList: data.cartSnap,
        userInfo: data.addressSnap,
        orderInfo: data,
        storeInfo: data.cooperateShopAddressSnap,
        loadingStatus: false
      }, () => {
        this.setState({
          loading: false
        })
      })
    })
  }

  //  确认退单
  onConfirmRefund(content) {
    const { id, orderInfo } = this.state
    //  订阅通知模板
    Taro.requestSubscribeMessage({
      tmplIds: getSubscribeMessage('orderRefund'),
      complete: () => {
        Taro.showLoading({ title: '请稍后', mask: true })
        refundOrder({ id, content }).then(() => {
          this.setState({
            isOpened: false,
            orderInfo: { ...orderInfo, refundAble: 0 }
          }, () => {
            Taro.hideLoading()
            Taro.showToast({ title: '提交成功' })
          })
        })
      }
    })
  }

  //  订单确认收货
  orderConfirmReceipt() {
    const { orderInfo } = this.state
    Taro.showLoading({ title: '请稍后', mask: true })
    confirmReceipt(this.state.id).then(() => {
      Taro.showToast({ title: '确认成功' })
      this.getOrderInfo()
      Taro.showModal({
        title: '提示',
        content: '是否前往评论',
        success ({ confirm }) {
          confirm && toOrderCommentPage(orderInfo.id)
        }
      })
    })
  }

  onchangeLogistics() {
    this.setState({
      bool: true
    })
    Taro.showToast({ title: '详情错误', icon: 'none' })
    // Taro.navigateBack({ delta: 1 })
    // this.$router.go(-1)
  }

  render() {
    const { loading, cartList, userInfo, storeInfo, orderInfo, isOpened, bool, tipList } = this.state
    return (<View className='detail-page order-info'>
      {loading && <Loading isCover/>}

      {!bool ? (<View>
        <View className='order-card detail-header d-f f-d-c p-0'>
          {
            orderInfo.distribute === 1 ? (
              <View className='order-card__body user-info d-f f-d-c f-w-w'>
                <View className='user-box d-f a-i-c j-c-b'>
                  <View className='user-name t-o-e'>{storeInfo.shopName}</View>
                  <View className='user-phone t-o-e'>{storeInfo.phone}</View>
                </View>
                <View className='user-box user-address'>{storeInfo.address}</View>
              </View>
            ) : (
              <View className='order-card__body user-info d-f f-d-c f-w-w'>
                <View className='user-box d-f a-i-c j-c-b'>
                  <View className='user-name t-o-e'>{userInfo.name}</View>
                  <View className='user-phone t-o-e'>{userInfo.telephone}</View>
                </View>
                <View className='user-box user-address'>{userInfo.city} {userInfo.detail}</View>
              </View>
            )
          }
        </View>

        <View className='order-card order-card__body'>
          <View className='cart-list'>
            {cartList.map(cart => {
              return (<OrderCardGoods key={cart.id} info={cart} isJump className='cart-item thin-border__b' />)
            })}
            <View className={styles.tips}>
              <View className={styles.tipLeft}>放心购</View>
              <View className={styles.tipList}>
                {tipList.map(item => {
                  return (<View className={styles.tipsItem}>{item}</View>)
                })}
              </View>
            </View>
            <View className={styles.delivery}>
              <View className='d-f a-i-c'>
                <FyImg src={DeliveryIcon} className={styles.Icon}/>
                <View>配送方式</View>
              </View>
              <View>免费包邮</View>
            </View>
            {<View className={styles.discounts}>
              <View className='d-f a-i-c'>
                <FyImg src={DiscountsIcon} className={styles.Icon} />
                <View>平台优惠</View>
              </View>
              <View className={styles.productPrice}>
                <View className={styles.priceItem}>
                  <View>商品总价</View>
                  <View>
                    {goodsScore(orderInfo.deductScore) && <Text>{orderInfo.deductScore}{getBrand()}+</Text>}
                    {orderInfo.payAmount}元
                  </View>
                </View>
                <View className={styles.priceItem}>
                  {/*<View>{getBrand()}已抵扣</View>*/}
                  <View>优惠金额</View>
                  <View>-{Number(orderInfo.originAmount) - Number(orderInfo.payAmount)}元</View>
                </View>
              </View>
            </View>}
          </View>
          {/*{!!orderInfo.refundAble && <View className='refund-box d-f a-i-c j-c-e'>*/}
          {/*  <Button className='refund-btn xf-btn xf-btn-round' hoverClass='hover-class--btn' onClick={this.setState.bind(this, { isOpened: true })}>退单</Button>*/}
          {/*</View>}*/}


          <View className='order-card order-card__body'>
            {/*<OrderGoodsList list={cartList}/>*/}
            {/*<View className='cart-list'>*/}
            {/*  {cartList.map((item) => {*/}
            {/*    return (<View key={item.id} className='goods-info d-f thin-border__b' onClick={() => toGoodsPage(item)}>*/}
            {/*      <Image src={headImg(item.images)} className='goods-img'/>*/}
            {/*      <View className='goods-right d-f f-d-c j-c-b'>*/}
            {/*        <View className='goods-name t-o-e'>{item.name}</View>*/}
            {/*        <View className='goods-sku t-o-e-2'>{item.specSnap}</View>*/}
            {/*        <View className='d-f j-c-b'>*/}
            {/*          <View className='goods-price bnn-number'>￥{formatAmount(item.amount)}</View>*/}
            {/*          <View className='goods-num'>x{item.number}</View>*/}
            {/*        </View>*/}
            {/*      </View>*/}
            {/*    </View>)*/}
            {/*  })}*/}
            {/*</View>*/}
            {/*<View className='detail-list'>*/}
            {/*<View className='detail-item'>*/}
            {/*  <View className='item-left'>优惠金额：</View>*/}
            {/*  <View className='item-right bnn-number'>￥{orderInfo.discountAmount}</View>*/}
            {/*</View>*/}
            {/*<View className='detail-item'>*/}
            {/*  <View className='item-left'>共{cartList.length}件商品</View>*/}
            {/*  <View className='item-right pay-amount bnn-number'>￥{orderInfo.payAmount}</View>*/}
            {/*</View>*/}
            {/*</View>*/}
          </View>
          {/*<View className='detail-list'>*/}
          {/*  {orderInfo.discountAmount && <View className='detail-item'>*/}
          {/*    <View className='item-left'>优惠金额：</View>*/}
          {/*    <View className='item-right bnn-number'>￥{orderInfo.discountAmount}</View>*/}
          {/*  </View>}*/}
          {/*  {orderInfo.freightAmount && <View className='detail-item'>*/}
          {/*    <View className='item-left'>运费</View>*/}
          {/*    <View className='item-right bnn-number'>￥{orderInfo.freightAmount}</View>*/}
          {/*  </View>}*/}
          {/*  <View className='detail-item'>*/}
          {/*    <View className='item-left'>共{cartList.length}件商品</View>*/}
          {/*    <View className='item-right pay-amount bnn-number'>￥{orderInfo.payAmount}</View>*/}
          {/*  </View>*/}
          {/*  <View className='detail-item'>*/}
          {/*    <View className='item-left'>订单备注：</View>*/}
          {/*    <View className='item-right'>{orderInfo.remark || '无'}</View>*/}
          {/*  </View>*/}
          {/*</View>*/}
        </View>

        <View className='order-card'>
          <View className='order-card__head'>订单信息<Text className='f-s-24 m-l-10' style={{color: '#999'}} onClick={() => copyText(orderInfo.id)}>(复制单号)</Text></View>
          <View className='order-card__body'>
            <View className='detail-list'>
              <View className='detail-item'>
                <View className='item-left'>订单状态：</View>
                <View className='item-right order-status'>{ORDER_TYPE_NAME[orderInfo.status]}</View>
              </View>
              {/*{orderInfo.expressNo && <View className='detail-item'>*/}
              {/*  <View className='item-left'>快递单号：</View>*/}
              {/*  <View className='item-right'>{orderInfo.expressNo}</View>*/}
              {/*</View>}*/}
              {/*{orderInfo.expressName && <View className='detail-item'>*/}
              {/*  <View className='item-left'>快递公司：</View>*/}
              {/*  <View className='item-right'>{orderInfo.expressName}</View>*/}
              {/*</View>}*/}
              <View className='detail-item'>
                <View className='item-left'>订单编号：</View>
                <View className='item-right'>{orderInfo.id}</View>
              </View>
              <View className='detail-item'>
                <View className='item-left'>订单时间：</View>
                <View className='item-right'>{formatTime(orderInfo.createdAt)}</View>
              </View>
              <View className='detail-item'>
                <View className='item-left'>订单备注：</View>
                <View className='item-right'>{orderInfo.remark || '无'}</View>
              </View>
            </View>
          </View>
        </View>

        {orderInfo.expressNo && <View className='order-card'>
          <View className='order-card__head'>物流信息</View>
          <View className='order-card__body'>
            <View className='detail-list'>
              <View className='detail-item'>
                <View className='item-left'>快递单号：</View>
                <View className='item-right'>{orderInfo.expressNo}</View>
              </View>
              <View className='detail-item'>
                <View className='item-left'>快递公司：</View>
                <View className='item-right'>{orderInfo.expressName}</View>
              </View>
              <Logistics info={orderInfo} onChange={this.onchangeLogistics.bind(this)} />
            </View>
          </View>
        </View>}
      </View>) : (<View>详情错误</View>) }


      <View className='float-box--height' />
      <View className='fy-popup fy-popup--bottom float-box d-f a-i-c j-c-b'>
        <Button className='confirm-btn xf-btn xf-btn-round xf-btn-primary' onClick={() => toOrderListPage()}>返回订单列表</Button>
        {ORDER_TYPE.SENDING === orderInfo.status && <Button className='confirm-btn xf-btn xf-btn-round xf-btn-primary'
                                                            onClick={this.orderConfirmReceipt.bind(this)}>确认收货</Button>}
      </View>

      <OrderRefundModal
        isOpened={isOpened}
        onClose={this.setState.bind(this, { isOpened: false })}
        onConfirm={this.onConfirmRefund.bind(this)}/>
    </View>)
  }
}
